<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>智慧社区系统</title>
    <vc:create path="frame/commonTop" location="head"></vc:create>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css?time=1">
    <link rel="stylesheet" href="/css/vc-ui.css?time=1" />

    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/vue/vue-resource.min.js"></script>
    <script src="/js/bootstrap/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/plugins/layui/layui.all.js"></script>
    <script src="/plugins/share/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .flex_row {
            display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox; /* TWEENER - IE 10 */
            display: -webkit-flex; /* NEW - Chrome */
            display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
            -webkit-flex-direction: row;
            -moz-flex-direction: row;
            -ms-flex-direction: row;
            -o-flex-direction: row;
            flex-direction: row;
            -moz-align-items: center;
            -ms-align-items: center;
            -o-align-items: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .flex_column{
            display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox; /* TWEENER - IE 10 */
            display: -webkit-flex; /* NEW - Chrome */
            display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
            -webkit-flex-direction: column;
            -moz-flex-direction: column;
            -ms-flex-direction: column;
            -o-flex-direction: column;
            flex-direction: column;
        }
        .just_contert {
            -webkit-justify-content: center;
            -moz-justify-content: center;
            -ms-justify-content: center;
            -o-justify-content: center;
            justify-content: center;
        }
        .just_around {
            -webkit-justify-content:  space-around;
            -moz-justify-content:  space-around;
            -ms-justify-content:  space-around;
            -o-justify-content:  space-around;
            justify-content:  space-around;
        }
        .just_between {
            -webkit-justify-content: space-between;
            -moz-justify-content: space-between;
            -ms-justify-content: space-between;
            -o-justify-content: space-between;
            justify-content: space-between;
        }
        .just_start {
            -webkit-justify-content: flex-start;
            -moz-justify-content: flex-start;
            -ms-justify-content: flex-start;
            -o-justify-content: flex-start;
            justify-content: flex-start;
        }
        .login_mian_flex{
            font-size: 18px;
            color: rgb(131,160,191);
            margin: 10px 0 20px;
        }
        .login-user-email {
            background-image: url(../img/email.png);
            background-repeat: no-repeat;
            background-size: 24px;
            background-position: 4px 6px;
            padding-left: 32px;
            outline: none;
        }
        .posi{
            position: relative;
        }
        .yzm_cls{
            display: inline-block;
            font-size: 13px;
            color: rgb(11, 113, 224);
            position: absolute;
            top: 50%;
            right: 8px;
            transform: translate(0%,-50%);
            -webkit-transform: translate(0%,-50%);
            cursor: pointer;
        }
        .active_line{
            color: whitesmoke !important;
        }
        .tab_text{
            display: inline-block;
            width:100%;
        }
        .tab_cls:nth-of-type(1) .tab_text{
            border-right: 2px solid rgb(64,102,146);
        }
        .tab_cls{
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 50%;
        }
        .line{
            display: inline-block;
            width:42px;
            margin-top:4px;
            height: 3.5px;
            border-radius: 15px;
            background: transparent;
        }
        .active_line .line{
            background: whitesmoke !important;
        }
    </style>
</head>

<body>
    <div class="layui-carousel video_mask" id="login_carousel">
        <vc:create path="frame/bodyTop" ></vc:create>

        <div carousel-item>
            <!--<div class="carousel_div1"></div>-->
            <div class="carousel_div2"></div>
            <!--<div class="carousel_div3"></div>-->
        </div>
        <div  class="login layui-anim layui-anim-up"> <!-- <div class="text-white" style="margin: 10px 0 20px;margin-left: 20px;padding: 0 10px;font-size: 20px;font-weight: 300;color: whitesmoke">
                <span>柴胡博客</span>
            </div>
            -->
            <div id="component" class="layui-form" action="" method="post">
                <vc:create path="/pages/frame/login"></vc:create>
            </div>
        </div>
    </div>


    <script src="/vcCore/vcCore.js"></script>
    <script type="text/javascript">
        var layer = layui.layer,
            form = layui.form,
            carousel = layui.carousel;

        // 背景图片轮播
        carousel.render({
            elem: '#login_carousel',
            width: '100%',
            height: '100%',
            interval: 3000,
            arrow: 'none',
            anim: 'fade',
            indicator: 'none'
        });

    </script>
</body>

</html>